<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-list
			@scrolltolower='scrolltolower'
		>	
			<view 
				@click='details(item.id)' 
				v-for="(item, index) in indexList"
				:key="index"
				class='list-item'
			>
				<u-list-item>
					<view>	昵称：{{ userInfo.username }} </view>
					<view>	内容：{{ item.content }} </view>
					<view>	时间：{{ item.time }} </view>
				</u-list-item>
				<view class="mainRow" style="color: #6F6D6D;justify-content: space-between;" >
					<text>{{item.time}}</text>
					<view class="mainRow mainAlignCenter" style='display: flex;'>
						<u--image width="30rpx" height="30rpx" src="/static/my/circle1.png"></u--image>
						<text style="padding: 0rpx 10rpx;">{{item.support_count}}</text>
						<u--image width="30rpx" height="30rpx"  src="/static/my/circle3.png"></u--image>
						<text style="padding: 0rpx 10rpx;">{{item.comment_count}}</text>
						<u--image width="30rpx" height="30rpx"  src="/static/my/circle2.png" mode="aspectFit"></u--image>
						<text style="padding: 0rpx 10rpx;">{{item.browse_count}}</text>
					</view>
				</view>
			</view>
		</u-list>
	</view>
</template>

<script>
import { circle } from '@/api/me.js'
import { mapState } from 'vuex'
export default{
	data () {
		return {
			indexList:[],
			number:1,
			status:true
		}
	},
	computed:{
		...mapState({
			userInfo:state=>state.user.userInfo
		})
	},
	onShow(){
		this.getData( this.number );
	},
	methods:{
		getData( pages ){
			circle({
				page:pages,
				user_id:this.userInfo.id
			}).then(res=>{
				//下啦是否有数据，如果没有数据就不添加了
				if( res.data.list.length < 1 ){
					this.$refs.uToast.show({
						message:'没有数据了'
					})
					this.status = false;
					return false;
				}
				//判断页面是否触底，如果触底累加,不触底直接赋值
				if(  this.number > 1 ){
					this.indexList = [...this.indexList,...res.data.list];
				}else{
					this.indexList = res.data.list;
				}
			})
		},
		scrolltolower(){
			if( !this.status ){
				return false;
			}
			this.number++;
			this.getData( this.number );
		},
		//进入详情
		details( id ){
			console.log( 1 );
			uni.navigateTo({
				url:`/pages/me/circleDetail?id=${id}`
			})
		}
		
	}
}
</script>

<style scoped>
.list-item{
	padding:15rpx;
	margin:20rpx 0;
}
</style>